import { defineComponent, ref, VNode, toRefs } from 'vue'
/* utils */
import _ from 'lodash'
/* scss */
import '@src/modules/intelligentQuality/views/newInfo/components/index.scss'
/* state */
import state from '@src/modules/intelligentQuality/utils/state.ts'
/* components */
import StepSettingField from '@src/modules/intelligentQuality/views/newInfo/components/stepSettingField.tsx'
import StepSettingPhoto from '@src/modules/intelligentQuality/views/newInfo/components/stepSettingPhoto.tsx'
import StepSettingPhotoBase from '@src/modules/intelligentQuality/views/newInfo/components/createPhotoBase.tsx'

export default defineComponent({
    name: 'createContent',
    props: {
        activeCheck: {
            type: Number,
            default: 1
        },
        data: {
            type: Object,
            default: () => ({})
        },
        isEdit: {
            type: Boolean,
            default: false
        }
    },
    emits: ['change'],
    setup(props, {emit}) {
        const steps = ref([{
            title: '设置质检的目标字段'
        }, {
            title: '设置对比图库'
        }, {
            title: '设置图片评级标准'
        }])
        // 当前步骤条选中状态
        const {activeCheck} = toRefs(props)
        const filedObj = ref(props.data)


        /**
         * @description 字段配置信息数据获取
         */
        const handlerField = (data: { formId: string, fieldList: string[]}) => {
            const { formId, fieldList } = data
            filedObj.value.formId = formId
            // @ts-ignore
            filedObj.value.fieldList = fieldList

            setStateFormField(formId, fieldList)
            emit('change', filedObj.value)
        }
        /**
         * @description 将表单id和字段列表存放在state中
         */
        const setStateFormField = (formId: string, fieldList: any) => {
            state.vailFormId = formId
            state.vailFieldList = fieldList
        }

        /**
         * @description 图片库配置信息数据获取
         */
        const handlerPhoto = (data: any) => {
            // @ts-ignore
            filedObj.value.examplePicList = data

            setStatePhoto(data)
            emit('change', filedObj.value)
        }
        /**
         *  @description 将更改数据存放在state中
         */
        const setStatePhoto = (examplePicList: any) => {
            state.vailPicList = examplePicList
        }

        const handlerPhotoBase = (data: any) => {
            filedObj.value = Object.assign(filedObj.value, data)

            emit('change', filedObj.value)
        }

        return () => (
            <div class="create-content">
                <div class="cre-container">
                    <div class="cre-header">
                        <div class="cre-title">配置机器人质检规则</div>
                    </div>
                    <div class="cre-step">
                        <el-steps active={activeCheck.value} align-center>
                            {
                                steps.value.map(item => {
                                    return (
                                            <el-step title={item.title}></el-step>
                                    )
                                })
                            }
                        </el-steps>
                    </div>
                        <StepSettingField v-show={activeCheck.value === 1} formId={filedObj.value.formId} fieldList={filedObj.value.fieldList} onChange={(data) => handlerField(data)} isEdit={props.isEdit}/>
                        <StepSettingPhoto v-show={activeCheck.value === 2} examplePicList={filedObj.value.examplePicList} onChange={(data) => handlerPhoto(data)}/>
                        <StepSettingPhotoBase v-show={activeCheck.value === 3} data={filedObj.value} onChange={(data) => handlerPhotoBase(data)}/>
                </div>
            </div>
        ) as unknown as VNode;
    }
})